<template>
  <el-container>
    <el-header>
      <el-form :inline="true"  class="demo-form-inline">
       <el-form-item label="产品三级分类">
        <el-cascader :options="productCategory" :props="{value:'id'}" placeholder="产品类别" v-model="filter.productCategoryCodeList" @change="changeCategory"></el-cascader>
      </el-form-item>
        <el-form-item label="产品型号">
          <el-input v-model="params.plmModelNo" placeholder="输入型号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
       <el-table :data="tableData" style="width: 100%">
        <el-table-column label="机型码" prop="plmModelNo"></el-table-column>
        <el-table-column width align="center" label="产品名称" prop="name"></el-table-column>
        <el-table-column width align="center" label="市场定位" prop="marketPositionDv"></el-table-column>
        <el-table-column width align="center" label="业务模式" prop="bizModelDv"></el-table-column>
        <el-table-column width align="center" label="上市年份" prop="salesYear"></el-table-column>
        <el-table-column width align="center" label="产品状态" prop="productStatusDv"></el-table-column>
        <el-table-column width align="center" label="编辑状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">草稿</span>
            <span v-if="scope.row.status===1">审核中</span> 
            <span v-if="scope.row.status===2">已发布</span>
            <span v-if="scope.row.status===3">已删除</span>
            <span v-if="scope.row.status===4">驳回</span>
          </template>
        </el-table-column>
          <el-table-column align="center" label="操作" width="250px" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  size="small"
                  type="success"
                  @click="$router.push({path:'list/model/detail',query:{modelPbsId:scope.row.id}})"
                >查看</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="handleUpdate(scope.row.id)"
                >编辑</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
    </el-main>
    <el-footer> 
      <el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
    </el-footer>
  </el-container>
</template>

<style lang="scss" scoped>
  section {
    padding-top: 20px;
  }
</style>

<script>
import * as superApi from "@/api/product/super/index";
import * as prodApi from '@/api/product/index';
export default {
  data () {
    return {
      filter: {
        options: {},
        params: {
          conditionList: [],
          moduleConditionList: [],
        },
        standard: 1
      },
      productCategory: [],
      tableData: [],
      params: {
        page: 1,
        size: 8,
        category: '',
        plmModelNo: ''
      },
      total: 0
    }
  },
  methods: {
    handleUpdate (modelPbsId) {
      this.$router.push({
        path: "/product/super/edit",
        query: {
          modelPbsId
        }
      });
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.getList()
    },
    getList() {
      superApi.getPublishedFiles(this.params).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
      });
    },
    changeCategory() {
      console.log('changeCategory');
      if (this.filter.productCategoryCodeList.length === 3) {
        this.getPdsConfModule(this.filter.productCategoryCodeList[2]);
      }
    },
    getPdsConfModule(categoryId) {
      if (this.filter.productCategoryCodeList && this.filter.productCategoryCodeList.length == 3) {
        this.params.category = categoryId
        this.getList()
      }
    },
    getPdsConfCategoryTree() {
      prodApi.getPdsConfCategoryTree().then(res => {
        console.log('getPdsConfCategoryTree', res);
        this.productCategory = res.data;
      });
    },
    search() {
      this.getList()
    }
  },
  activated () {
    this.getList();
  },
  created() {
    this.getPdsConfCategoryTree();
  },
  watch: {
    'filter.standard' (val) {
      if (this.filter.productCategoryCodeList && this.filter.productCategoryCodeList.length == 3) {
        this.getPdsConfModule(this.filter.productCategoryCodeList[2]);
      }
    }
  }
}
</script>


